<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录-支付宝</title>
		<link rel="stylesheet" type="text/css" href="chris/css/login.css"/>
		<link rel="icon" href="chris/img/login/favicon.ico" type="image/x-icon" />
		<script src="chris/js/jquery2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body >
		<!--style="overflow-x:hidden;overflow-y:hidden"-->
		<div class="authcenter">
				<div class="topNav">
						<ul class="topLeft">
							<li><a href="#">支付宝APP</a></li>
						</ul>
						<ul class="topRight">
							<li class="topRight2">
								<a href="personal.html">支付宝首页</a>
							</li>
							<li>
								<span>|</span>
							</li>
							<li class="topRight2 ">
								<a href="#">
									服务大厅
								</a>
							</li>
							<li>
								<span>|</span>
							</li>
							<li class="topRight2 Down">
								<a href="#">
									提建议
								</a>
							</li>
						</ul>
					</div>
			</div>
			<div class="middle">
				<div class="logo">
					<a href="personal.html" title="支付宝首页">
						<img src="chris/img/login/logo.png" class="alipay-logo" alt="alipay-logo">
					</a>
				</div>
				<div class="loginDiv">
					<div class="loginDivTop">
						<span class="span1">扫码登录</span>
						<span class="span2">账密登录</span>
					</div>
					<div class="loginDivMid1">
						<div id="pic1">
							
						</div>
						<div id="pic2">
							
						</div>
					</div>
					<div class="loginDivFooter1">
						<p class="p1">请使用手机支付宝扫码</p>
						<p class="p2">
							<a class="a1" href="https://cshall.alipay.com/lab/help_detail.htm?help_id=23427066" title="使用帮助">使用帮助</a>
							<span>|</span>
							<a href="https://mobile.alipay.com/index.htm" title="下载手机支付宝">下载手机支付宝</a>
						</p>
					</div>
					
					<form action="" method="get">
						<div class="loginDivMid2">
							<div class="loginUsername">
								<div class="loginUsernamePic">
									
								</div>
								<input type="text" id="loginUsername" placeholder="邮箱/手机号/淘宝会员名" />
							</div>
							<div class="loginPassword">
								<div class="loginPasswordPic">
									
								</div>
								<input type="password" id="loginPassword" name="" />
							</div>
							<span>
								<a href="https://accounts.alipay.com/console/querypwd/logonIdInputReset.htm?site=1&page_type=fullpage&scene_code=resetQueryPwd">
									忘记登录密码？
								</a>
							</span>
							<div class="loginCheckText">
								<div class="loginCheckTextPic">
									
								</div>
								<input type="text" id="loginCheckText" placeholder="验证码" />
								<div class="checkCode">
									<img class="ui-checkcode-img" 
										id="J-checkcode-img" 
										src="https://authgtj.alipay.com:443/login/imgcode.htm?sessionID=973dcdf61d98ef88dfc804132b520031&amp;t=0.6381550843371346" 
										title="点击图片刷新验证码" 
										alt="点击图片刷新验证码" 
										seed="authcenter-img-checkcode"
										onClick="this.src='https://authgtj.alipay.com:443/login/imgcode.htm?sessionID=973dcdf61d98ef88dfc804132b520031&amp;t=0.6381550843371346' + new Date().getTime();">
								</div>
							</div>
							<div class="loginCheckVoice">
								<div class="loginCheckVoicePic">
									
								</div>
								<input type="text" id="loginCheckVoice" placeholder="验证码" />
								<div class="checkVoice"
									data-src="https://authgtj.alipay.com:443/login/audiocode.htm?sessionID=973dcdf61d98ef88dfc804132b520031&amp;r=0.10026831323244456">
        								<span class="sl-refresh" id="J-checkcode-voice-txt">重新播放</span>
								</div>
							</div>
						</div>
						<div class="loginDivFooter2">
							<input type="submit" id="submit" value="登录"/>
							<p>
								<a class="a2" href="#" title="淘宝会员登录">淘宝会员登录</a>
								<a class="a2" href="#" title="账户激活">账户激活</a>
								<a class="a3" href="#" title="免费注册">免费注册</a>
							</p>
						</div>
						
					</form>
					
				</div>	
				<div class="onlineService">
					<a href="#">
						<img src="chris/img/login/question.png"/>
					</a>
					<span class="close">×</span>
				</div>
			
			</div>
			<div class="footer">
		        <div class="foot-container">
		            <p class="foot-link">
		                <a href="https://ab.alipay.com/" seed="auth-gyzfb">关于支付宝</a> 
		                <span>|</span>
		                <a href="https://job.alibaba.com/zhaopin/index.htm" seed="auth-czyc">诚征英才</a>
		                <span>|</span>
		                <a href="https://ab.alipay.com/i/lianxi.htm" seed="auth-lxwm">联系我们</a>
		                <span>|</span>
		                <a href="https://global.alipay.com" seed="auth-ib">International Business</a>
		                <span>|</span>
		                <a href="https://ab.alipay.com/i/jieshao.htm#en" seed="auth-aboutAlipay">About Alipay</a>
		            </p>
					<div class="copyright">
						<a href="https://fun.alipay.com/certificate/jyxkz.htm" target="_blank" seed="copyright-link" smartracker="on">ICP证：沪B2-20150087</a>
					</div>
				</div>
			</div>
			<div class="bg">
				
			</div>
		</div>
		
		<script type="text/javascript">
			$(function(){
				$(".span1").click(function(){
					$(".span1").css("color","#00AAEE")
					$(".span1").css("border-bottom-color","#00AAEE")
					$(".span2").css("color","#FFFFFF")
					$(".span2").css("border-bottom-color","#FFFFFF")
					$(".loginDiv").css("height","286px");
					$(".loginDivMid1").css("display","block");
					$(".loginDivFooter1").css("display","block");
					$("form").css("display","none");
				});
				$(".span2").click(function(){
					$(".span1").css("color","#FFFFFF")
					$(".span1").css("border-bottom-color","#FFFFFF")
					$(".span2").css("color","#00AAEE")
					$(".span2").css("border-bottom-color","#00AAEE")
					$(".loginDiv").css("height","345px");
					$(".loginDivMid1").css("display","none");
					$(".loginDivFooter1").css("display","none");
					$("form").css("display","block");
				});
				$(".loginCheckTextPic").click(function(){
					$(".loginCheckVoice").css("display","block");
				});
				$(".loginCheckVoicePic").click(function(){
					$(".loginCheckVoice").css("display","none");
					$(".loginCheckText").css("display","block");
				});
				$(".loginDivFooter1 .p2 .a1").mouseover(function(){
					$("#pic1").css("opacity","0");
					$("#pic2").fadeIn(200);
					$("#pic2").animate({marginLeft:"0px"},500);	
				});
				$(".loginDivFooter1 .p2 .a1").mouseout(function(){
					$("#pic1").css("opacity","1");
					$("#pic2").fadeOut(200);	
					$("#pic2").animate({marginLeft:"74px"},500);
				});
				$(".onlineService a").click(function(){
					window.open("https://cschannel.alipay.com/newPortal.htm?scene=scene_33&token=&eventToken=&pointId=&enterurl=https%3A%2F%2Fauth.alipay.com%2Flogin%2Findex.htm%3FneedTransfer%3Dtrue%26goto%3Dhttp%3A%2F%2Fmobile.alipay.com%2Findex.htm","","top=0,left=0,width=880,height=600");
				});
				$(".close").click(function(){
					$(".close").css("display","none");
					$(".onlineService").css("display","none");
				});
			});
		</script>
		
		
	</body>
</html>
